import React from 'react';
import PropTypes from 'prop-types';

import { withStyles } from 'material-ui/styles'

import loadingImage from '../../static/image/loading.gif'
import style from './style'

class LoadMore extends React.Component {
  constructor() {
    super();
    this.state = {

    }
    this.getMore = this.getMore.bind(this)
  }
  getMore() {
    this.props.onBottom();
  }
  render() {
    const {
      classes,
      isLoading,
      hasMore,
      hasMoreTips,
      noMoreTips,
    } = this.props
    return (
      <div className={classes.loadMore}>
        { isLoading ?
          <div className={classes.loading}>
            <img className={classes.loadingImage} src={loadingImage} alt="加载中..." />
          </div>
           :
          ''
        }
        { !isLoading && hasMore ?
          <span className="more" onClick={this.getMore} >{hasMoreTips}</span>
           :
          ''
        }
        { !isLoading && !hasMore ?
          <p className="more">{noMoreTips}</p>
            :
          ''
        }
      </div>
    )
  }
}
export default withStyles(style)(LoadMore)
LoadMore.propTypes = {
  onBottom: PropTypes.func.isRequired,
  isLoading: PropTypes.bool,
  hasMore: PropTypes.bool,
  classes: PropTypes.objectOf(Object),
  hasMoreTips: PropTypes.string,
  noMoreTips: PropTypes.string,
}
